<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/styleinfo' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>设计款式信息</el-breadcrumb-item>
		</el-breadcrumb>
	<div>
		<span class="demonstration">时间:</span>
		    <!-- <el-date-picker
		      v-model="rantime"
		      value-format="yyyy-MM-dd HH:mm:ss"
		    
		      type="datetimerange"
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker> -->
			
			 <el-date-picker
		      v-model="rantime"
			  value-format="yyyy-MM-dd"
		      type="daterange"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      :default-time="['00:00:00', '23:59:59']">
		    </el-date-picker>
		    
		<span class="juli">销售价:</span>
		<el-input v-model="sprice" placeholder="请输入值" style="width:15%"></el-input>
		<span>-</span>
		<el-input v-model="eprice" placeholder="请输入值" style="width:15%"></el-input>
	</div>	
	<div style="margin-top:15px;">
		<span>款号:</span>
		<el-input v-model="title_no" placeholder="请输入款号" style="width:15%"></el-input>
  		<span class="juli">风格:</span>
		<el-input v-model="style" placeholder="请输入风格内容" style="width:15%"></el-input>
		
		<span class="juli">主题:</span>
		<el-input v-model="subject" placeholder="请输入主题内容" style="width:15%"></el-input>
		<span class="juli">主石规格:</span>
		<el-input v-model="stonemodel" placeholder="请输入主石规格内容" style="width:15%"></el-input>
		
	</div>	
	<div style="margin-top:15px;">
		<span>款式:</span>
			<el-select v-model="fashion" filterable placeholder="请选择">
		        <el-option
		                v-for="item in options"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id">
		        </el-option>
		    </el-select>
		<span class="juli">专利:</span>
		<el-input v-model="patent" placeholder="请输入专利内容" style="width:15%"></el-input>
		
		<span class="juli">专款:</span>
		<el-input v-model="special" placeholder="请输入专款内容" style="width:15%"></el-input>
		
		<span class="juli">款式来源:</span>
		<el-input v-model="designer" placeholder="请输入 款式来源内容" style="width:15%"></el-input>
		
	</div>	
		
	<div style="margin-top:15px;margin-left: 40px;margin-bottom:10px;" >
		<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
			
		<el-button  type="danger" icon="el-icon-plus" @click="addDesign">新增</el-button>
		<el-button  type="danger" icon="el-icon-delete" @click="delDesign">删除</el-button>
		
		<el-button-group v-if="this.userInfo.username == 'admin'">
			<el-button  type="danger" icon="el-icon-tickets" @click="detailList()">详情</el-button>
			<el-button  type="danger " icon="el-icon-download" class="juli" @click="excelDown">导出Excel</el-button>
		</el-button-group>
		
		<el-button-group v-else>
			<template v-for="item in btt">
				<el-button  type="danger" v-if="item==12"  icon="el-icon-tickets" @click="detailList()">详情</el-button>
				<el-button  type="danger " v-if="item==13" class="juli"  icon="el-icon-download" @click="excelDown">导出Excel</el-button>
			</template>		
		</el-button-group>
		<div style="float:right ">
			<span class="el-pagination__total" style="margin-left: 20px;">共 {{page.total}} 条数据</span> 
		</div>
	</div>
   
		<el-table 
			v-loading="loading"
		    :data="tableData"
		    style="width: 100%"
		    :height="tableHeight"
		    border
		    fit
		    highlight-current-row
    		@current-change="shandleCurrentChange"
    		@sort-change='tableSortChange'
		   >
		    <el-table-column label="缩略图" width="100" align="center" fixed prop="desc">
		      	<template slot-scope="scope">
		      		<img width="60" height="60" :src="scope.row.img_url_1[0]">
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="设计款号" width="140"  fixed prop="design_no" sortable>
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.design_no }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="款号" width="140"  fixed prop="title_no" sortable>
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.title_no }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="厂款号" width="120" fixed prop="factory_no" sortable>
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.factory_no }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="款式分类" 
		      width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.fashion }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="风格分类" 
		      width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.style }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="主题分类"
		      width="110">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.subject }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="专利"
		      width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.patent }}</span>
		      	</template>
		    </el-table-column>
			
			<el-table-column
		      label="专款"
		      width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.special }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="款式来源"
		      width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.designer }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="银版号"
		      width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.pagenum }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="主成色"
		      width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.main_color }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="主石类型"
		      width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.stonetype}}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="主石规格"
		      width="100">
		      	<template slot-scope="scope">
		        	<span>{{scope.row.stonemodel}}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="制作供应商"
		      width="120" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.supplier }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="销售价"
		      width="100" sortable>
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.price }}</span>
		      	</template>
		    </el-table-column>
		    
		    
		    <el-table-column
		      label="库存数"
		      width="100"  sortable>
		      	<template slot-scope="scope">
		        	<span >{{Math.floor(scope.row.fauxjc) }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="销售件数"
		      width="120"  sortable>
		      	<template slot-scope="scope" >
		        	<span>{{Math.floor(scope.row.fauxxs) }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="期间销售"
		      width="120"  prop="" sortable>
		      	<template slot-scope="scope">
		        	<span >{{Math.floor(scope.row.fauxqj)}}</span>
		      	</template>
		    </el-table-column>
		    
		  </el-table>
		  
		  <div class="block el-pagination" style="margin-top: 0px; overflow: hidden;"> 
				<el-pagination class="pages" background layout="prev, pager, next" :total="page.total" :page-size="page.size" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"> 
				</el-pagination>
		  </div>
		  
		  <el-dialog title="附件下载" :visible.sync="fileDwonload">
			<el-button type="primary"  @click="downloadFile()">wenjian</el-button>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			var sdDate = [];
			return {
				loading:false,
				tableData: [],
				token:"",
				rantime:[],
				tableHeight: window.innerHeight - 403 < 560 ? 700 : (window.innerHeight - 403),
				currentRow:[],
				arr:[],
				listQuery:{sortby:'',order:'desc'},
				fileDwonload:false,
				url:'',
				btt:[],
				page: {
					 total: 0,
					 size: 0, 
					 currentPage: 1,
					 num: 1 
					 },
				options: [{
				          id: 1,
				          name: '耳饰'
				        }, {
				          id: 2,
				          name: '项链'
				        }, {
				          id: 3,
				          name: '吊坠'
				        },{
				          id: 4,
				          name: '胸针'
				        },{
				          id: 5,
				          name: '手链'
				        },{
				          id: 6,
				          name: '戒指'
				        },{
				          id: 7,
				          name: '手镯'
				        },{
				          id: 8,
				          name: '耳扣'
				        },{
				          id: 9,
				          name: '耳钉'
				        },{
				          id: 10,
				          name: '耳坠'
				        }, {
				          id:0,
				          name: '全部'
				        }],
				        fashion: 0,
				        style:'',
				        subject:'',
				        sprice:'',
				        eprice:'',
				        patent:'',
				        special:'',
				        designer:'',
				        design_no:'',
				        title_no:'',
				        factory_no:'',
				        stonemodel:'',
				        
					}
				},
				
		created(){
			this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getTime();
			this.getdesignList();
			var user = this.getCookie('user_info');
			if(user){
				this.userInfo = JSON.parse(user);
				this.btt = this.userInfo.blist.split(',');
			}
		},
		mounted() {
			this.getCookie('user_info');
			const that = this;
			// 动态设置表格高度适应窗口
			window.onresize = () => {
				let a = window.innerHeight;
				that.tableHeight = a-403;
			}
		},
		methods:{
			addDesign(){
				this.$router.push({ path: '/api/design/add'});
			},
			delDesign(){
				if(this.currentRow.length <=0){
					this.$notify({type:"error",message:"请选择一行"});
					return false;
				}else{
					axios.get('/api/design/del?id='+ this.currentRow.id)
					.then(res => {
						if(res.data.code ==200){
							this.$notify({
								type:"success",
								message:"删除成功"
							});
							this.getdesignList();
						}else{
							this.$notify.error({
								title:"错误",
								message:res.data.message
							})
						}
							
					})
					.catch(error => {
						this.$notify.error({
							title:"错误",
							message:res.data.message
						})
					})
				}
			},
			detailList()
			{
				if(this.currentRow.length <=0){
					this.$notify({type:"error",message:"请选择一行"});
					return false;
				}
			    this.$router.push({ path: '/api/design/detail?id='+ this.currentRow.id})
			
			},
			getdesignList(){
				this.loading = true;
				axios.get('/api/design/designlist?page='+ this.page.num +'&title_no='+this.title_no+'&time=' +this.rantime+'&fashion='+this.fashion +'&style='+this.style+'&subject='+this.subject+'&patent='+this.patent+'&special='+this.special+'&designer='+this.designer+'&stonemodel='+this.stonemodel+'&sprice='+this.sprice+'&eprice='+this.eprice)
					.then(result => {
						if(result.data.code == 200){
							this.tableData = result.data.result.data;
							this.page.total = result.data.result.total; 
 							this.page.size = result.data.result.per_page;  
 							this.page.per_page = result.data.result.last_page;
							this.loading = false;
						}else{
							this.$notify.error({
								title:"错误",
								message:result.data.message
							})
						}
					})
					.catch(error => {
						this.loading = false;

					})
			},
			getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
			//时间
			
			shandleCurrentChange(data) {
			        this.currentRow = data;
			      },
			      tableSortChange(column){
				if (column.order === 'descending') {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'desc'
			      } else {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'asc'
			      }
			//this.getdesignList();
			},
			handleEdit(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=1"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"状态更新成功",
	    					message:res.data.message
	    				})
	    				this.getGoodsList();
					})
		    },
		    excelDown(){
		    	axios.get('/excel/export?t=3&title_no='+this.title_no+'&time=' +this.rantime+'&fashion='+this.fashion +'&style='+this.style+'&subject='+this.subject+'&patent='+this.patent+'&special='+this.special+'&designer='+this.designer+'&stonemodel='+this.stonemodel+'&sprice='+this.sprice+'&eprice='+this.eprice)
					.then(result => {
						if(result.data.code == 200){
							console.log(result.data.result);
							this.fileDwonload = true;
							this.url = result.data.result;
							
							
						}else{
							this.$notify.error({
								title:"错误",
								message:result.data.message
							})
						}
					})
					.catch(error => {
						
					})
		    },
		    downloadFile(){
		    	window.open('/api/download?d='+this.url);
		    },
		    handerSearch(){
		  		this.page.num = 1;
		   	 	this.getdesignList();
		    },
		    
		    handleCurrentChange(val) {
               this.page.num = val;
                this.getdesignList();
            },
		    handleDelete(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=2"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"状态更新成功",
	    					message:res.data.message
	    				})
	    				this.getGoodsList();
					})
		    },
		    addTime(m){
		    	return m<10?'0'+m:m 
		    },
		    
			getTime(){
				var date = new Date()
			    let y = date.getFullYear()
			    let m = date.getMonth() + 1
			    let d = date.getDate()
			    let time = y + '-' + m + '-' + d;
				let d1 = '01';
				let time1 = y + '-' + m + '-' + d1;
				this.rantime[0]=time1;
			    this.rantime[1]=time;
				
			},

			
			timeFormat(shijianchuo)
			{
				//shijianchuo是整数，否则要parseInt转换
				var time1 = new Date(shijianchuo);
				var y = time1.getFullYear();
				var m = time1.getMonth()+1;
				var d = time1.getDate();
				var h = time1.getHours();
				var mm = time1.getMinutes();
				var s = time1.getSeconds();
				return y+'-'+this.addTime(m)+'-'+this.addTime(d)+' '+this.addTime(h)+':'+this.addTime(mm)+':'+this.addTime(s);
			}
			
		}
	}
</script>

<style lang="scss">
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{
	      	height: 40px;
	    }
	 .juli{
	 	margin-left:10px;
	 	}   
  	}
	.el-pagination__total{
		float: left;
		margin-top: 2px;
	}
	.pages{
		float: right;
	}
</style>
